<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-5xl mx-auto px-8 py-12">
      <!-- 头部区域 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">链接提取工具</h1>
        <p class="text-lg text-gray-600">支持抖音、快手、小红书、B站等平台的链接提取</p>
      </div>

      <!-- 主要内容区域 -->
      <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
        <!-- 输入框 -->
        <div class="mb-6">
          <textarea
            v-model="inputLinks"
            class="w-full h-48 p-4 border-2 border-dashed border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 resize-none"
            placeholder="请将链接粘贴到这里，支持批量提取，一行一个链接"
          ></textarea>
        </div>

        <!-- 支持的平台 -->
        <div class="flex items-center justify-center gap-8 mb-8">
          <div v-for="platform in platforms" :key="platform.name" class="text-center">
            <div class="w-16 h-16 rounded-lg overflow-hidden mb-2">
              <img :src="platform.icon" :alt="platform.name" class="w-full h-full object-cover"/>
            </div>
            <span class="text-sm text-gray-600">{{ platform.name }}</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-center">
          <button
            @click="handleExtract"
            class="!rounded-button flex items-center justify-center px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white text-lg font-medium transition-colors duration-200"
            :class="{ 'opacity-50 cursor-not-allowed': isLoading }"
            :disabled="isLoading"
          >
            <i v-if="isLoading" class="fas fa-spinner animate-spin mr-2"></i>
            <span>{{ isLoading ? '提取中...' : '开始提取' }}</span>
          </button>
        </div>
      </div>

      <!-- 结果展示区域 -->
      <div v-if="extractResult" class="bg-white rounded-lg shadow-lg p-8">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-medium text-gray-900">提取结果</h3>
          <button
            @click="handleCopy"
            class="!rounded-button flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium transition-colors duration-200"
          >
            <i class="fas fa-copy mr-1"></i>
            复制内容
          </button>
        </div>
        <div class="bg-gray-50 rounded-lg p-4 mb-4">
          <pre class="whitespace-pre-wrap text-gray-700">{{ extractResult }}</pre>
        </div>
        <div class="flex justify-center">
          <button
            @click="handleReset"
            class="!rounded-button px-6 py-2 border border-gray-300 hover:border-gray-400 text-gray-600 text-sm font-medium transition-colors duration-200"
          >
            重新提取
          </button>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <footer class="bg-gray-100 py-8">
      <div class="max-w-5xl mx-auto px-8 text-center">
        <p class="text-gray-600 mb-2">支持平台：抖音、快手、小红书、哔哩哔哩、微博等主流社交平台</p>
        <p class="text-gray-500 text-sm">© 2024 链接提取工具 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      inputLinks: '',
      isLoading: false,
      extractResult: '',
      platforms: [
        {
          name: '抖音',
          icon: 'https://ai-public.mastergo.com/ai/img_res/84aa9612ef002171e78728964d72859e.jpg'
        },
        {
          name: '快手',
          icon: 'https://ai-public.mastergo.com/ai/img_res/73c941344bd6451bd220e740929b132d.jpg'
        },
        {
          name: '小红书',
          icon: 'https://ai-public.mastergo.com/ai/img_res/2d870b5f63a05036700dbec0f352fc2b.jpg'
        },
        {
          name: '哔哩哔哩',
          icon: 'https://ai-public.mastergo.com/ai/img_res/d1447bf6dffadb49e66f833708d5ec4d.jpg'
        }
      ]
    };
  },
  methods: {
    async handleExtract() {
      if (!this.inputLinks.trim()) {
        this.showMessage('warning', '请输入需要提取的链接');
        return;
      }

      this.isLoading = true;
      try {
        // 模拟提取过程
        await new Promise(resolve => setTimeout(resolve, 2000));
        this.extractResult = '这是模拟的提取结果：\n\n标题：2024年最值得期待的科技产品\n简介：本视频为您带来2024年最值得期待的科技产品盘点，包括新一代VR设备、折叠屏手机等创新科技产品。\n发布时间：2024-01-15\n点赞数：8.2万\n评论数：2,453';
        this.showMessage('success', '提取成功');
      } catch (error) {
        this.showMessage('error', '提取失败，请重试');
      } finally {
        this.isLoading = false;
      }
    },
    async handleCopy() {
      try {
        await navigator.clipboard.writeText(this.extractResult);
        this.showMessage('success', '复制成功');
      } catch (error) {
        this.showMessage('error', '复制失败，请手动复制');
      }
    },
    handleReset() {
      this.inputLinks = '';
      this.extractResult = '';
    },
    showMessage(type, message) {
      // 简单的提示实现
      alert(message);
    }
  }
};
</script>

<style scoped>
	
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

